<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- 
    推荐使用语义化的元素来划分区域，默认下面这些元素是没有什么样式的
    就是单纯为了标准 为了语义化，否则也可以用div一把梭
   -->


  <!-- div 无语义的容器 -->
  <div></div>

  <!-- 有语义的容器，表示这是一个头部 -->
  <header>
    This is 头部！
  </header>

  <!-- 表示一篇文章 -->
  <article>
    <!-- 文章有标题，也可以用header元素表示头部 -->
    <header>
      <h3>文章头部</h3>
    </header>
    <!-- 文章的章节 -->
    <section>
      <!-- 文章的段落 -->
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, ullam itaque dolorum saepe facilis officiis facere nisi, dolore pariatur officia ipsum consequatur consequuntur a beatae dolores perspiciatis totam mollitia quia!</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, ullam itaque dolorum saepe facilis officiis facere nisi, dolore pariatur officia ipsum consequatur consequuntur a beatae dolores perspiciatis totam mollitia quia!</p>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis, ullam itaque dolorum saepe facilis officiis facere nisi, dolore pariatur officia ipsum consequatur consequuntur a beatae dolores perspiciatis totam mollitia quia!</p>
    </section>
    <p></p>
  </article>

  <!-- 侧边栏，一般用来表示附加信息 -->
  <aside>
    侧边栏，附件元素
  </aside>
  <!-- 有语义的容器，表示这是一个尾部 -->
  <footer>
    This is 尾部！
  </footer>

   
</body>
</html>